<template>
  <div class="fast-navigation">
    <div class="fast-navigation-item" v-for="(item, index) in fastNavigationList" :key="index">
      <a :href="item.href || 'javascript:;'" target="_blank">
        <img :src="item.img" :alt="item.title">
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'fastNavigation',
  data () {
    return {
      fastNavigationList: [
        {
          img: 'http://www.kongfz.com/img/lm.jpg',
          title: '孔网艺术品',
          href: 'http://www.kongfz.cn/union'
        }, {
          img: 'http://www.kongfz.com/img/mj.png',
          title: '墨迹楼',
          href: 'http://hxtx.kongfz.cn/'
        }, {
          img: 'http://www.kongfz.com/img/mmxj.png',
          title: '墨墨小姐',
          href: 'http://mmxj.kongfz.cn/'
        }, {
          img: 'http://www.kongfz.com/img/rrns.png',
          title: '瑞瑞女士',
          href: 'http://rrns.kongfz.cn/'
        }, {
          img: 'http://www.kongfz.com/img/tysj.jpg',
          title: '孔网·陶雅世家',
          href: 'http://tysj.kongfz.cn/'
        }, {
          img: 'http://www.kongfz.com/img/jjdc.png',
          title: '九九典藏',
          href: 'http://jjdc.kongfz.cn/'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  .fast-navigation {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    .fast-navigation-item + .fast-navigation-item {
      margin-top: 5px;
    }
    .fast-navigation-item {
      position: relative;
      a {
        display: block;
        img {
          width: 100%;
        }
      }
      &:hover {
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          height: 20px;
          width: 20px;
          background: url('/static/img/hover.png') no-repeat;
          background-size: 100%;
          z-index: 10;
        }
        &::after {
          content: '';
          position: absolute;
          bottom: 2px;
          right: 0;
          height: 20px;
          width: 20px;
          background: url('/static/img/hover.png') no-repeat;
          background-size: 100%;
          z-index: 10;
          transform: rotate(180deg)
        }
      }
    }
  }
</style>
